<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
import { useProfile } from './composables/useProfile'
import PasswordForm from './PasswordForm.vue'
import { useUpdatePassword } from './composables/useUpdatePassword'

const { t } = useI18n<[typeof import('./locales/zh-CN.json')]>({ useScope: 'parent' })
const { profile } = useProfile()

const { visible, formRef, formState, isPending, toggleVisible, validate } = useUpdatePassword()
</script>

<template>
  <div class="bg-arco-2 pa-4 rounded">
    <div class="flex gap-x-4xl items-center">
      <div class="flex flex-col justify-center items-center gap-y-xs">
        <a-avatar class="select-none !bg-blue-3 dark:!bg-gray-6" :size="60">
          <i class="i-fluent-scan-person-28-filled text-4xl" />
        </a-avatar>
        <a-button @click="toggleVisible(true)" size="mini" type="dashed">
          {{ t('profile.updatePassword') }}
        </a-button>
      </div>
      <div>
        <a-descriptions :column="1" :data="profile" />
      </div>
    </div>
    <a-drawer
      :title="t('profile.updatePassword')"
      :width="340"
      :okLoading="isPending"
      @ok="validate"
      @cancel="toggleVisible(false)"
      unmountOnClose
      :visible
    >
      <PasswordForm ref="formRef" v-model="formState" />
    </a-drawer>
  </div>
</template>
